<template>
  <div class="Calendar">
      <div class="Calendar-header">
        <div v-for="(item,index) in CaleendarHeader" :key="index" class="Calendar-item">{{item}} </div>
      </div>
      <div class="Calendar-Container">
        <div class="Calendar-wrapper">
          <div class="Caledar-item-day" v-for="(item,index) in dataTtime"  :key="index" :class="[getBorderColor(item)]">
            <div class="Calendar-day">{{item.status==0?'':item.days}}</div>
            <div class="Calendar-nums" @click="handleGo(item.days)">{{ getTaskStatus(item.days) }}</div>
          </div>
        </div>
      </div>
  </div>
</template>

<script  setup>
import { useRouter  } from 'vue-router'
import { defineProps} from 'vue'
import  dayjs from 'dayjs'
const CaleendarHeader=['日','一','二','三','四','五','六'];
const router=useRouter();
const getBorderColor=(item)=>{
  if(item.status==0){
    return 'visabled'
  } else {
    const workStatus = getTaskStatus(item.days)
    if(workStatus=='已完成'){
      return 'complete'
    } else if(workStatus=='查看学习任务'){
      return 'incomplete'
    } else {
      return 'none'
    }
  }
  
}
const dataTtime=ref([])
// const Maxdays=ref(35);
const props = defineProps({
  UpdateTimeDate: {
    type: Object
  },
  homeworkList: {
    type: Array,
    default: () => []
  }
})
const endDays={0:6,1:5,2:4,3:3,4:2,5:1,6:0}
const startEnd={0:0,1:1,2:2,3:3,4:4,5:5,6:6}
const getFillDaysEnd=(lastDayOfWeek)=>{
  return new Array(endDays[lastDayOfWeek]).fill({status:0});
}
const getFillDays=(days)=>{
  return new Array(startEnd[days]).fill({status:0})
}
watch(() => props.UpdateTimeDate, (newVal) => {
  let {daysInMonth,firstDayOfWeek,lastDayOfWeek}=newVal;
  dataTtime.value=[];
  dataTtime.value=getFillDays(firstDayOfWeek);

  for (let index = 0; index < daysInMonth; index++) {
    dataTtime.value.push({
      status:1,
      days:index+1
    })
  }
  // debugger
  // console.log(len,'len',)
  dataTtime.value=[...dataTtime.value,...getFillDaysEnd(lastDayOfWeek)]

  console.log('UpdateTimeDate changed:', dataTtime)
}, { deep: true })

const handleGo=(day)=>{
  const homework = props.homeworkList.find(item => item.day === day)
  if(homework){
    router.push({path:'/minTask',query:{id:homework.id}})
  }
}

const getTaskStatus = (day) => {
  const homework = props.homeworkList.find(item => item.day === day)
  
  if (!homework) {
    return '暂无'
  }
  
  return homework.is_finsh === 1 ? '查看学习任务' : '已完成'
}
</script>

<style lang="scss" scoped>
.Calendar{
  padding:0px 20px 20px;
  .Calendar-Container{
    .Calendar-wrapper{
      display:flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content:space-between;
    }
    .visabled{
      border-top-color: #FFF;
      visibility: hidden;
    }
    .Calendar-nums{
      font-size:13px;
      font-weight:400;
      padding-top:15px;
    }
    .Caledar-item-day{
      width:97px;
      height:64px;
      text-align:right;
      border-top: 4px solid #CCCCCC;
      padding:10px 10px 0px 0px;
      
      &.incomplete {
        border-top-color: #1890ff;
        color: #1890ff;
      }

      &.complete {
        border-top-color: #52c41a;
        color: #52c41a;
      }

      &.none {
        border-top-color: #d9d9d9;
      }
    }
  }
}
.Calendar-header{
  display:flex;
  width:100%;
  gap:10px;
  margin-bottom:20px;
  
  justify-content:space-between;

  .Calendar-item{
    width:97px;
    text-align:right;
    padding-right: 5px;
    font-size: 16px;
    color:#333333;
    font-weight:600;
 
  }
}
</style>